import { it, describe, expect } from 'vitest'

import { initFonts, toImage } from './utils.js'
import satori from '../src/index.js'

describe('Emojis', () => {
  let fonts
  initFonts((f) => (fonts = f))

  it('should detect emojis correctly', async () => {
    const emojis = []
    await satori(<div>⛷👨‍👩‍👧❤️‍🔥🏳️‍🌈㊗️🛠👶🏾</div>, {
      width: 100,
      height: 100,
      fonts,
      loadAdditionalAsset: async (languageCode, segment) => {
        if (languageCode === 'emoji') {
          emojis.push(segment)
        }
        return ''
      },
    })
    expect(emojis).toMatchInlineSnapshot(`
      [
        "⛷",
        "👨‍👩‍👧",
        "❤️‍🔥",
        "🏳️‍🌈",
        "㊗️",
        "🛠",
        "👶🏾",
      ]
    `)
  })

  // https://github.com/vercel/satori/issues/302
  it('should render emojis correctly', async () => {
    const svg = await satori(
      <div
        style={{
          backgroundColor: '#fff',
        }}
      >
        🌈 🏳️‍🌈 Luci, 👨‍👨‍👧Nyan👨‍👨‍👧‍👧
      </div>,
      {
        width: 200,
        height: 100,
        fonts,
        graphemeImages: {
          '🌈': '',
          '🏳️‍🌈': '',
          '👨‍👨‍👧': '',
          '👨‍👨‍👧‍👧': '',
        },
      }
    )

    expect(await toImage(svg)).toMatchImageSnapshot()
  })

  it('should render emojis correctly with `word-break: break-all`', async () => {
    const svg = await satori(
      <div
        style={{
          backgroundColor: '#fff',
          wordBreak: 'break-all',
        }}
      >
        🌈 🏳️‍🌈 Luci, 👨‍👨‍👧Nyan👨‍👨‍👧‍👧
      </div>,
      {
        width: 200,
        height: 100,
        fonts,
        graphemeImages: {
          '🌈': '',
          '🏳️‍🌈': '',
          '👨‍👨‍👧': '',
          '👨‍👨‍👧‍👧': '',
        },
      }
    )

    expect(await toImage(svg)).toMatchImageSnapshot()
  })

  it('should render emojis correctly with alphabetic emoji', async () => {
    const svg = await satori(
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#fff',
        }}
      >
        <div>⚡Hello⚡</div>
        <div>⚡ Hello ⚡</div>
        <div>🚀Hello🚀</div>
        <div>🚀 Hello 🚀</div>
      </div>,
      {
        width: 200,
        height: 100,
        fonts,
        graphemeImages: {
          '⚡': '',
          '🚀': '',
        },
      }
    )

    expect(await toImage(svg)).toMatchImageSnapshot()
  })
})
